<template>
  <div class="app-container">
    <el-button
      v-powerbtn="{power:'setting-role-add'}"
      type="primary"
      size="mini"
      round
      icon="el-icon-circle-plus-outline"
      @click="addNewRole"
    >新增</el-button>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="角色名称">
          <template slot-scope="scopeq">
            {{ scopeq.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scopes">
            {{ scopes.row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scopess">
            <el-button
              v-powerbtn="{power:'setting-role-find'}"
              type="primary"
              plain
              size="mini"
              round
              @click="watch(scopess.row.id, scopess.row.name, scopess.row.remark)"
            >查看</el-button>
            <el-button
              v-powerbtn="{power:'setting-role-edit'}"
              type="primary"
              size="mini"
              round
              plain
              @click="editNewRole(scopess.row.id, scopess.row.name, scopess.row.remark)"
            >编辑</el-button>
            <el-button
              v-show="false"
              type="primary"
              size="mini"
              icon="el-icon-third-edit"
              round
              @click="editRole(scopess.row)"
            >编辑/查看</el-button>
            <el-button
              v-powerbtn="{power:'setting-role-delete'}"
              type="primary"
              round
              plain
              size="mini"
              @click="deleteRole(scopess.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="pageid"
          :page-sizes="[20,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>
    <!-- <edit-role :dialog-table-visible="dialogTableVisible" :scope="scope" :add-scope="addScope" @closeDialog="closeDialog" /> -->
    <add-new :dialog-table-new="dialogTableNew" @closeNewDialog="closeNewDialog" />
    <edit-new :dialog-edit-new="dialogEditNew" :role-id="roleId" :role-name="roleName" :role-desc="roleDesc" @closeEditDialog="closeEditDialog" />
    <watch-new :dialog-watch="dialogWatch" :role-id="roleId" :role-name="roleName" :role-desc="roleDesc" @closeWatchDialog="closeWatchDialog" />
  </div>
</template>

<script>
import { getList, deleteRole } from '@/api/rolesetting'
import { mapGetters } from 'vuex'
// import secret from '@/utils/secret'
import powerbtn from '@/directive/powerbtn/index.js'
// import EditRole from './components/edit.vue'
import addNew from './components/add.vue'
import editNew from './components/editNew.vue'
import watchNew from './components/watch.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    // EditRole,
    addNew,
    editNew,
    watchNew
  },
  data() {
    return {
      list: null,
      dialogWatch: false,
      roleId: 0,
      pageid: 1, // 当前页数
      pagecount: 20, // 每页显示条数
      count: 0, // 总数量
      roleName: '',
      roleDesc: '',
      pages: null, // 总页数
      dialogTableVisible: false, // 遮罩
      scope: null, // 传值_编辑时
      addScope: false, // 传值_增加时
      power: null, // 权限
      roleManage_add: false, // 新增
      roleManage_edit: false, // 编辑
      roleManage_dele: false, // 删除
      flag: true,
      dialogTableNew: false,
      dialogEditNew: false,
      basic: null,
      scoped: null
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  mounted() {
    this.loadList()
    this.dialogTableVisible = false
  },
  methods: {
    // 请求列表
    loadList() {
      const data = {
        // token: this.token,
        pageNum: this.pageid,
        limit: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      getList(data).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.total) // 总数量
        console.log('请求参数')
        console.log(response)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 当前页数改变时
    handleSizeChange(num) {
      this.flag = false
      this.pagecount = num
      const data = {
        // token: this.token,
        pageNum: 1,
        limit: num
      }
      console.log('请求参数')
      console.log(data)
      getList(data).then(response => {
        this.flag = true
        this.pageid = 1
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.total) // 总数量
        console.log('返回数据')
        console.log(response)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      const data = {
        // token: this.token,
        pageNum: num,
        limit: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      if (this.flag === true) {
        getList(data).then(response => {
          this.list = response.data.list // 列表项
          this.count = parseInt(response.data.total) // 总数量
          this.pageid = num // 当前页数
          console.log('返回数据')
          console.log(response)
        }).catch(() => {
          this.$message({
            message: '请求列表失败，请重试',
            type: 'error'
          })
        })
      }
    },
    // 删除角色
    deleteRole(scope) {
      this.$confirm('确定进行角色删除操作吗?删除后，该角色将不可用', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          // token: this.token,
          id: scope.id
        }
        console.log('请求参数')
        console.log(data)
        deleteRole(data).then((response) => {
          console.log('返回数据')
          console.log(response)
          if (response.resultCode === '0000') {
            this.$message({
              message: response.resultDesc,
              type: 'success'
            })
            // 删除本页最后一条bug
            const pages = (this.count - 1) % this.pagecount
            if (pages === 0) {
              if (this.pageid > 1) {
                this.handleCurrentChange(parseInt(this.pageid - 1))
              } else {
                this.handleCurrentChange(parseInt(this.pageid))
              }
            } else if (pages > 0) {
              this.handleCurrentChange(this.pageid)
            }
          } else {
            this.$message({
              message: response.resultDesc,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        console.log('删除取消')
      })
    },
    // 编辑角色
    editRole(scope) {
      console.log(2)
      this.dialogTableVisible = true
      this.scope = scope
    },
    addNewRole() {
      this.dialogTableNew = true
    },
    // 增加用户
    addRole() {
      this.dialogTableVisible = true
      this.addScope = true
    },
    editNewRole(id, name, desc) {
      this.roleName = name
      this.roleDesc = desc
      this.dialogEditNew = true
      this.roleId = id
    },
    watch(id, name, desc) {
      this.roleName = name
      this.roleDesc = desc
      this.dialogWatch = true
      this.roleId = id
    },
    // 遮罩子组件回调
    closeDialog() {
      this.dialogTableVisible = false
      this.addScope = false
      this.loadList()
    },
    closeNewDialog() {
      this.dialogTableNew = false
      this.loadList()
    },
    closeEditDialog() {
      this.dialogEditNew = false
      this.loadList()
    },
    closeWatchDialog() {
      this.dialogWatch = false
      this.loadList()
    }
  }
}
</script>

<style scoped>
  .row-bg{
    margin:10px 20px;
  }
  .checkboxPer{
    margin-top: -15px;
    margin-left: 50px;
  }
  .app-table{
    margin-top: 15px;
  }
</style>
